<template>
    <div class="choujiang">
    <div class="container">
    <h3 class="header_h3">抽奖</h3>
    <table class="s">
      <tr>
        <td>{{a.cjcs}}<br>参与人数</td>
        <td>10<br>中奖人数</td>
      </tr>
    </table>
  </div>
  
  <div class="container">
    <table class="s">
      <tr>
        <td>{{a.cjcs}}<br>抽奖次数</td>
        <td>{{a.one+a.tow+a.three+a.four+a.five+a.six+a.seven+a.eight}}<br>获奖次数</td>
      </tr>
    </table>
  </div>

  <div class="container">
    <table class="table text-center  table-striped table-light border-dark">
      <thead class="tou">
        <tr>
          <th>项目等级</th>
          <th>领取数量</th>
          <th>第几次抽奖时派发首份</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>一等奖</td>
          <td>{{a.one}}</td>
          <td>0</td>
        </tr>
        <tr>
          <td>二等奖</td>
          <td>{{a.tow}}</td>
          <td>0</td>
        </tr>
        <tr>
          <td>三等奖</td>
          <td>{{a.three}}</td>
          <td>0</td>
        </tr>
        <tr>
          <td>四等奖</td>
          <td>{{a.four}}</td>
          <td>0</td>
        </tr>
        <tr>
          <td>五等奖</td>
          <td>{{a.five}}</td>
          <td>0</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="container">
    <table class="table text-center  table-striped table-light">
      <thead class="tou">
        <tr>
          <th>项目等级</th>
          <th>领取数量</th>
          <th>第几次抽奖时派发首份</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>六等奖</td>
          <td>{{a.six}}</td>
          <td>0</td>
        </tr>
        <tr>
          <td>七等奖</td>
          <td>{{a.seven}}</td>
          <td>0</td>
        </tr>
        <tr>
          <td>八等奖</td>
          <td>{{a.eight}}</td>
          <td>0</td>
        </tr>
      </tbody>
    </table>
  </div>
    </div>
</template>
<script>
export default {
  data(){
    return{
      a:{}
    }
  },
  mounted(){
    this.axios.get('http://pw.clianmaimai.com:8071/dn/select_prize?user_id=1')
    .then(result=>{
      this.a = result.data[0];
      console.log(this.a)
    })
  }
}
</script>
<style scoped>
.tou{
      background-color:lightblue;
    }
    div{
      box-shadow: 1px solid gray;
    }
    .s{
      width: 100%;
      height: 60px;
      /* 调整上下间距！！！ */
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .s tr td{
      border: 2px solid #ccc;
      text-align: center;
      background-color: lightgray;
    }
   .header_h3{
     text-align: center;
   }
   :root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
  }
  
  @-ms-viewport {
    width: device-width;
  }
  
  article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
  }
  
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
  }
  
  [tabindex="-1"]:focus {
    outline: 0 !important;
  }
  .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }
  .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
  }
  .text-center {
    text-align: center !important;
  }
  .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
  }
  .table-dark.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
  }
  .table-light,
.table-light > th,
.table-light > td {
  background-color: #fdfdfe;
}

.table-hover .table-light:hover {
  background-color: #ececf6;
}
.table-light,
.table-light > th,
.table-light > td {
  background-color: #fdfdfe;
}

.table-hover .table-light:hover {
  background-color: #ececf6;
}
.border-dark {
    border-color: #343a40 !important;
  }
  @media (min-width: 576px) {
    .container {
      max-width: 540px;
    }
  }
  
  @media (min-width: 768px) {
    .container {
      max-width: 720px;
    }
  }
  
  @media (min-width: 992px) {
    .container {
      max-width: 960px;
    }
  }
  
  @media (min-width: 1200px) {
    .container {
      max-width: 1140px;
    }
  }
  .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
  }
  
  .table th,
  .table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
  }
  
  .table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
  }
  
  .table tbody + tbody {
    border-top: 2px solid #dee2e6;
  }
  
  .table .table {
    background-color: #fff;
  }
  
  .table-sm th,
  .table-sm td {
    padding: 0.3rem;
  }
  
  .table-bordered {
    border: 1px solid #dee2e6;
  }
  
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #dee2e6;
  }
  
  .table-bordered thead th,
  .table-bordered thead td {
    border-bottom-width: 2px;
  }
</style>